<template>
  <div class="image-operate" id="image-operate" @click="handleClick" >
    <div class="content">
      <el-icon @click="close"><Close /></el-icon>
      <div class="info-none info" v-show="imageCategoryName == ''">当前图片不属于任何相册</div>
      <div class="info-belong info" v-show="imageCategoryName != ''">当前图片属于相册：{{imageCategoryName}}</div>
      <div class="select">
        将图片移动到相册：
        <el-select v-model="selectValue" class="m-2" placeholder="Select" size="default">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <el-button type="primary" @click="move">确认</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { computed, ref } from "vue";
import { updateImg } from "../../request/img";
import { useImageStore } from "../../store/image";
const imageStore = useImageStore()
const selectValue = ref('')
const options = computed(() => {
  let optionArr = [] as any[]
  imageStore.categories.forEach(val => {
    optionArr.push({label: val.categoryName, value: val.id.toString()})
  })
  return optionArr
})
const imageCategoryName = computed(() => {
  for(let val of imageStore.categories){
    if(val.id === imageStore.operatingImage.categoryId){
      return val.categoryName
    }
  }
  return ''
})
function close(){
  imageStore.operating = false
}
function move(){
  if(!selectValue.value){
    ElMessage({type: 'error', message: '未选择相册'})
    return
  }
  updateImg(imageStore.operatingImage.id, parseInt(selectValue.value)).then(
    res => {
      if(res.data.success){
        imageStore.operatingImage.categoryId = parseInt(selectValue.value)
        ElMessage({type: 'success', message: '操作成功'})
        close()
      }
    }
  )
}
function handleClick(e:any){
  if(e.target.id === 'image-operate'){
    close()
  }
}
</script>

<style scoped>

</style>